<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="resume_tit">
				<view class="back-btn" @tap="navigateBack">
					<text class="back-icon">‹</text>
				</view>
				<view class="title-text">广告申请</view>
			</view>
			<view class="ptb20 plr30">
				<form @submit="submitForm">

					<!-- 基本信息 -->
					<view class="box">
						<view class="fs36 col0 fwb mb30">基本信息</view>
						<view class="info_item flex-box">
							<view class="label">企业名称</view>
							<input type="text" name="company_name" v-model="form.company_name"
								class="flex-grow-1 tr" placeholder="请输入企业名称" placeholder-class="col9" />
						</view>
						<view class="info_item flex-box">
							<view class="label">所属行业</view>
							<input type="text" name="industry" v-model="form.industry"
								class="flex-grow-1 tr" placeholder="请输入所属行业" placeholder-class="col9" />
						</view>
						<view class="info_item flex-box">
							<view class="label">联系人</view>
							<input type="text" name="contact_name" v-model="form.contact_name"
								class="flex-grow-1 tr" placeholder="请输入联系人姓名" placeholder-class="col9" />
						</view>
						<view class="info_item flex-box">
							<view class="label">手机号</view>
							<input type="number" name="mobile" v-model="form.mobile" maxlength="11"
								class="flex-grow-1 tr" placeholder="请输入手机号" placeholder-class="col9" />
						</view>
						<view class="info_item flex-box">
							<view class="label">展示天数</view>
							<input type="number" name="display_days" v-model="form.display_days"
								class="flex-grow-1 tr" placeholder="请输入展示天数（默认7天）" placeholder-class="col9" />
						</view>
					</view>

					<!-- 广告类型 -->
					<view class="box">
						<view class="fs36 col0 mb30">广告类型</view>
						<view class="clearfix type_main">
							<view v-for="(item, index) in adTypeList" :key="index"
								@click="form.ad_type = item.value"
								:class="[form.ad_type == item.value ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>

					<!-- 文件上传 -->
					<view class="box">
						<view class="fs36 col0 mb30">{{form.ad_type == 1 ? '广告图片' : '广告视频'}}</view>

						<!-- 图片上传 -->
						<view v-if="form.ad_type == 1" class="clearfix">
							<view v-if="imageList.length > 0" class="upload_img">
								<image :src="imageList[0].url" mode="aspectFill"></image>
								<view class="remove_img" @click="deleteImage(0)">
									<image src="https://admin.mosizp.cn/static/public/pop_close.png"></image>
								</view>
							</view>
							<view v-else class="upload_img" @click="chooseImage">
								<image src="https://admin.mosizp.cn/static/public/icon_add2.png" mode="aspectFit"></image>
							</view>
						</view>

						<!-- 视频上传 -->
						<view v-else class="clearfix">
							<view v-if="form.ad_file" class="video-container">
								<video :src="videoUrl" class="preview-video" controls></video>
							</view>
							<view v-else>
								<view class="upload_img upload_video" @click="chooseVideo">
									<image src="https://admin.mosizp.cn/static/public/icon_add2.png" mode="aspectFit"></image>
								</view>
								<view class="fs24 col9 tc mt10">限100MB以内</view>
							</view>
						</view>
					</view>

					<!-- 提交按钮 -->
					<button formType="submit" class="btn" :loading="loading">提交申请</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				company_name: '',
				industry: '',
				contact_name: '',
				mobile: '',
				ad_type: 1,
				ad_file: '',
				ad_images: [],
				display_days: 7  // 默认7天
			},
			adTypeList: [{
				name: '图片广告',
				value: 1
			}, {
				name: '视频广告',
				value: 2
			}],
			imageList: [],
			videoUrl: '',
			loading: false
		}
	},
	onLoad() {
		// 获取用户信息，预填充企业名称等
		this.getUserInfo();
	},
	methods: {
		// 返回上一页
		navigateBack: function() {
			uni.navigateBack({
				delta: 1
			});
		},
		getUserInfo() {
			const userinfo = this.$core.getUserinfo();
			if (userinfo && userinfo.group_id == 2) {
				// 如果有企业信息，预填充
				this.form.company_name = userinfo.company_name || '';
				this.form.contact_name = userinfo.realname || '';
				this.form.mobile = userinfo.mobile || '';
			}
		},

		// 选择图片
		chooseImage() {
			const page = this;
			uni.chooseImage({
				count: 1, // 只能选择一张
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 清空之前的图片
					page.imageList = [];
					page.form.ad_images = [];
					// 上传新图片
					// 根据平台使用不同的文件属性
					const file = res.tempFiles ? res.tempFiles[0] : { path: res.tempFilePaths[0] };
					page.uploadFile(file, 'image');
				}
			});
		},

		// 删除图片
		deleteImage(index) {
			this.imageList.splice(index, 1);
			this.form.ad_images.splice(index, 1);
		},

		// 选择视频
		chooseVideo() {
			const page = this;
			uni.chooseVideo({
				sourceType: ['album', 'camera'],
				maxDuration: 60,
				success: (res) => {
					if (res.size > 100 * 1024 * 1024) {
						page.$core.showToast('视频大小不能超过100MB');
						return;
					}
					const file = { path: res.tempFilePath, size: res.size };
					page.uploadFile(file, 'video');
				}
			});
		},

		// 上传文件到服务器
		uploadFile(file, type) {
			const page = this;
			uni.showLoading({ title: '上传中...' });

			const uploadConfig = {
				filePath: file.url || file.tempFilePath || file.path,
				success(ret, response) {
					if (type === 'image') {
						// 图片只保留一张
						page.imageList = [{
							url: page.cdnurl(ret.data.url, true),
							status: 'success'
						}];
						page.form.ad_images = [ret.data.url];
					} else {
						page.form.ad_file = ret.data.url;
						page.videoUrl = page.cdnurl(ret.data.url, true);
					}
					page.$core.showToast('上传成功');
					uni.hideLoading();
				},
				fail(err) {
					page.$core.showToast(err.msg || '上传失败');
					uni.hideLoading();
				}
			};

			// #ifdef H5
			this.$core.uploadFileH5(uploadConfig);
			// #endif
			// #ifdef MP-WEIXIN
			this.$core.uploadFile(uploadConfig);
			// #endif
			// #ifndef H5 || MP-WEIXIN
			this.$core.uploadFile(uploadConfig);
			// #endif
		},


		// 提交表单
		submitForm(e) {
			const formData = e.detail.value;

			// 合并表单数据
			Object.assign(this.form, formData);

			// 验证必填项
			if (!this.form.company_name) {
				this.$core.showToast('请输入企业名称');
				return;
			}
			if (!this.form.industry) {
				this.$core.showToast('请输入所属行业');
				return;
			}
			if (!this.form.contact_name) {
				this.$core.showToast('请输入联系人姓名');
				return;
			}
			if (!this.form.mobile) {
				this.$core.showToast('请输入手机号');
				return;
			}
			if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
				this.$core.showToast('请输入正确的手机号');
				return;
			}

			// 验证展示天数
			if (!this.form.display_days || this.form.display_days < 1) {
				this.$core.showToast('请输入展示天数');
				return;
			}

			// 验证文件上传
			if (this.form.ad_type == 1 && this.form.ad_images.length === 0) {
				this.$core.showToast('请上传广告图片');
				return;
			}
			if (this.form.ad_type == 2 && !this.form.ad_file) {
				this.$core.showToast('请上传广告视频');
				return;
			}

			this.loading = true;

			// 准备提交数据
			const submitData = {
				...this.form,
				ad_file: this.form.ad_type == 1 ? '' : this.form.ad_file,
				// ad_images 传递字符串类型（单图路径）
				ad_images: this.form.ad_type == 1 ? (this.form.ad_images[0] || '') : ''
			};

			// 调用API提交
			this.$core.request({
				url: 'xilujob.ad/apply',
				method: 'POST',
				data: submitData,
				success: (res) => {
					// 使用模态框提示用户
					uni.showModal({
						title: '提示',
						content: '广告申请提交成功，我们会尽快审核！',
						showCancel: false,
						confirmText: '确定',
						success: (modalRes) => {
							if (modalRes.confirm) {
								// 用户点击确定后返回上一页
								uni.navigateBack();
							}
						}
					});
				},
				fail: (err) => {
					// 失败时也使用弹窗提示
					uni.showModal({
						title: '提交失败',
						content: err.msg || '提交失败，请稍后重试',
						showCancel: false,
						confirmText: '知道了'
					});
				},
				complete: () => {
					this.loading = false;
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.resume_tit {
	background-color: var(--primary);
	padding-top: var(--status-bar-height);
	height: calc(120rpx + var(--status-bar-height));
	display: flex;
	align-items: flex-end;
	position: relative;

	.back-btn {
		position: absolute;
		left: 20rpx;
		bottom: 0;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		z-index: 10;

		.back-icon {
			font-size: 50rpx;
			color: #fff;
			font-weight: bold;
			transform: scaleX(1.5);
		}
	}

	.title-text {
		flex: 1;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 120rpx;
	}
}

.box {
	padding: 30rpx;
	margin: 0 0 20rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
}

.info_item {
	line-height: 80rpx;
	height: 80rpx;
	border-bottom: 1rpx solid #F3F3F3;
	position: relative;
	font-size: 28rpx;

	.label {
		color: #666;
		min-width: 140rpx;
	}
}

.info_item:last-of-type {
	border-bottom: 0;
}

.info_item input {
	text-align: right;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
}

.type_main view {
	padding: 0 30rpx;
	border-radius: 50rpx;
	line-height: 58rpx;
	min-width: 160rpx;
	background-color: #F4F4F4;
	color: #666666;
	font-size: 24rpx;
	text-align: center;
	float: left;
	margin-right: 38rpx;
	box-sizing: border-box;
	margin-bottom: 25rpx;
}

.type_main .active {
	background-color: var(--primary);
	color: #fff;
}

.upload_img {
	width: 150rpx;
	height: 150rpx;
	float: left;
	margin-right: 30rpx;
	position: relative;
}

.upload_img image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 10rpx;
}

.upload_video {
	width: 200rpx;
	height: 200rpx;
}

.remove_img {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
}

.video-container {
	width: 100%;
	margin-bottom: 20rpx;
}

.preview-video {
	width: 100%;
	height: 400rpx;
	border-radius: 10rpx;
}

.btn {
	margin: 60rpx auto 0;
	background: var(--primary);
	border-radius: 4rpx;
	border: 0;
	height: 82rpx;
	line-height: 82rpx;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
}

// 工具类
.ptb20 {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.plr30 {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.mb30 {
	margin-bottom: 30rpx;
}

.mb20 {
	margin-bottom: 20rpx;
}

.mt10 {
	margin-top: 10rpx;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}

.fs24 {
	font-size: 24rpx;
}

.fs28 {
	font-size: 28rpx;
}

.fs36 {
	font-size: 36rpx;
}

.col0 {
	color: #000;
}

.col9 {
	color: #999;
}

.fwb {
	font-weight: bold;
}

.flex-box {
	display: flex;
	align-items: center;
}

.flex-grow-1 {
	flex-grow: 1;
}

.jc {
	justify-content: center;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
</style>